.post-share__sharing-preview-modal {
	border-radius: 2px;
	overflow: hidden;
	width: 100%;
}

.dialog.card.post-share__sharing-preview-modal {
	margin: 0 auto;
	max-width: 865px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	@include breakpoint-deprecated( '>960px' ) {
		top: 24px;
	}
}

.post-share__sharing-preview-modal .dialog__content {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
}

.post-share__sharing-preview-modal-header {
	height: 48px;
	background: var( --color-surface );
	border-bottom: 1px solid var( --color-neutral-10 );
	border-radius: 2px 2px 0 0;
	display: flex;
}

.post-share__sharing-preview-modal-close {
	border-right: 1px solid var( --color-neutral-10 );
	width: 48px;
	height: 49px;
	cursor: pointer;
	color: var( --color-text-subtle );

	&:hover {
		color: var( --color-neutral-70 );
	}
}

//Mostly copied from Seo Preview Pane
.sharing-preview-pane {
	display: flex;
	flex-direction: column;
	height: 100%;

	@include breakpoint-deprecated( '>660px' ) {
		flex-direction: row;
	}
}

.sharing-preview-pane__sidebar {
	background-color: var( --color-surface );
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;

	.vertical-menu {
		flex-direction: row;
		justify-content: center;
		max-width: none;

		.vertical-menu__social-item {
			border: 0;
			padding: 8px;
		}

		.vertical-menu__items.is-selected {
			border-left: 0;
			border-bottom: 3px solid #0087be;
		}

		.vertical-menu__items__social-label {
			display: none;
		}

		@include breakpoint-deprecated( '>660px' ) {
			flex-direction: column;
			justify-content: flex-start;
			border-bottom: 1px solid #c8d7e1;


			.vertical-menu__social-item {
				border-top: 1px solid #c8d7e1;
				padding: 0;
			}

			.vertical-menu__items.is-selected {
				border-left: 3px solid #0087be;
				border-bottom: 0;
			}

			.vertical-menu__items__social-label {
				display: block;
			}
		}
	}

	@include breakpoint-deprecated( '>660px' ) {
		border-right: 1px solid var( --color-neutral-10 );
		flex: 0 0 250px;
	}
}

.sharing-preview-pane__explanation {
	display: flex;
	flex-direction: column;
	margin: 20px 20px 0;
	font-family: $sans;

	.sharing-preview-pane__title {
		font-size: $font-body;
		font-weight: normal;
		margin: 0;
	}

	.sharing-preview-pane__description {
		font-size: $font-body-extra-small;
	}

	@include breakpoint-deprecated( '>660px' ) {
		margin: 40px 0 40px 20px;
		max-width: 200px;
	}
}

.sharing-preview-pane__preview-area {
	background-color: #f2f6f8;
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 10px;
}

.sharing-preview-pane__message {
	padding: 10px;
	text-align: center;
}
